<template>
  <div class style="height: 100%;padding: 10px 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>

import * as echarts from "echarts/dist/echarts";
import uuidv1 from "uuid/v1";
import dayjs from 'dayjs';
import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import axios from "@/utils/requestdp";

export default {
  components: {},
  name: "chartlinechartgonglv2zzn",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: "",
      x: 0
    };
  },
  computed: {
    ishistory: function () {
      return this.$store.state.daping.ishistorytime;
    },
    timerangarr: function () {
      return this.$store.state.daping.timepick;
    },
  },
  watch: {
    "$store.state.daping.manageHeatPlantzz": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale;

    var color = "#F5F5F5";

    var option = {};

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
  },
  methods: {
    loadData(heatPlantData) {
      var scale = this.$root.setting.scale;
      var pidArr8 = ['29947', '43620'];
      var heatPlantInfoMap = heatPlantData["heatPlantInfoMap"];

      var basicData = heatPlantInfoMap.filter((item) => {
        if (item.pid == pidArr8[this.x]) {
          return true;
        }
      })[0];

      var hsName = basicData.name ? basicData.name : null;
      var nowHour = new Date().getHours();
      let startTime;
      var day = new Date();
      var day2 = new Date();
      let stime;
      let etime;
      let tomorrow = day2.setTime(day2.getTime()+24*60*60*1000);
      if (nowHour < 20) {
        let yestoday = day.setTime(day.getTime()-24*60*60*1000);
        startTime = dayjs(dayjs(yestoday).format('YYYY-MM-DD') + " 20:00:00").unix();
        stime = etime = dayjs(yestoday).format('YYYY-MM-DD')
      } else {
        startTime = dayjs(dayjs().format('YYYY-MM-DD') + " 20:00:00").unix();
        stime = etime = dayjs().format('YYYY-MM-DD');
      }
      // 昨晚八点时间
      let params = {
        queries: [
          {
            'metric': 'pid,name,m_001t,m_002t,m_001p,m_002p,m_003q,m_003qc',
            schema: 'monitor',
          }
        ],
        table: 'heatplant',
        type: 'history',
        orderBy: "aligntime",
        search: `pid=${pidArr8[this.x]}`,
        startTime,
        endTime: dayjs().unix()
      }
      axios.post("/open/queryDb", params).then((res) => {
        if (res.data.length) {
          let xData = res.data.map(v => v.aligntime.split(' ')[1].substr(0,5))
          xData[0] = '20:00';
          let rlData = res.data.map(v => Number(v.m_003qc / 3.6).toFixed(2))
          // 查询买热量
          axios.get(`/heatPlan/totalConvertHeat?stime=${stime}&etime=${etime}&sourcePid=${pidArr8[this.x]}`).then(res2 => {
            let bugHeat = res2.data;
            let mrlData = res.data.map(v => Object.values(bugHeat)[0])

            var option = {
              title: {
                text: hsName + "(MW)",
                textStyle: {
                  color: "#fff",
                  fontSize: 24 * scale,
                  fontWeight: "bold",
                },
              },
              tooltip: {
                trigger: "axis",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 30 * scale,
                },
                formatter(params) {
                  var html =
                    params[0].axisValueLabel +
                    "<br>" +
                    params[0].marker +
                    params[0].seriesName +
                    " : " +
                    params[0].value +
                    "<br>" +
                    params[1].marker +
                    params[1].seriesName +
                    " : " +
                    params[1].value +
                    "<br>" +
                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#D06D6A;"></span>' +
                    '差值' +
                    " : " +
                    (params[1].value - params[0].value).toFixed(2);
                    return html;
                }
              },
              grid: {
                //统计图距离边缘的距离
                bottom: "0%",
                top: "20%",
                left: "5%",
                right: "10%",
                containLabel: true,
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  data: xData,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "#F5F5F5", //x轴颜色
                    },
                  },
                  axisLabel: {
                    textStyle: {
                      color: "#F5F5F5",
                      fontSize: 30 * scale,
                    },
                    showMaxLabel: true
                  },
                  axisTick: {
                    show: false,
                  },
                  splitLine: {
                    show: false,
                  },
                },
              ],
              yAxis: [
                {
                  type: "value",
                  splitLine: {
                    show: false,
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "#F5F5F5",
                    },
                  },
                  axisLabel: {
                    textStyle: {
                      color: "#F5F5F5",
                      fontSize: 30 * scale,
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                },
              ],
              series: [
                {
                  data: rlData,
                  name: "热量",
                  symbolSize: 0,
                  type: 'line',
                  smooth: true,
                  lineStyle: {
                    normal: {
                      color: "#329FE4",
                    },
                  },
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      color: "#329FE4", //tooltip里点的颜色
                    },
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "#329FE480",
                          },
                          {
                            offset: 1,
                            color: "#329FE400",
                          },
                        ],
                        false
                      ),

                      shadowColor: "rgba(53,142,215, 0.9)",
                      shadowBlur: 20,
                    },
                  },
                },
                {
                  data: mrlData,
                  name: "买热量",
                  symbolSize: 0,
                  type: 'line',
                  smooth: true,
                  lineStyle: {
                    normal: {
                      color: "#E4E26A",
                    },
                  },
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      color: "#E4E26A", //tooltip里点的颜色
                    },
                  },
                }
              ],
            };
            this.myChart.setOption(option);
            this.x++;
            if (this.x == pidArr8.length) {
              this.x = 0;
            }
          })
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>